<template>
    <div v-if="selectedBook" class="borrow-book">
      <h2>Borrow Confirmation</h2>
      <div class="book-info">
        <p><strong>Title:</strong> {{ selectedBook.bookname }}</p>
        <p><strong>Author:</strong> {{ selectedBook.author }}</p>
        <p><strong>ISBN:</strong> {{ selectedBook.isbn }}</p>
      </div>
      <div class="borrow-options">
        <label for="duration">Borrowing Period:</label>
        <select id="duration" v-model="selectedDuration">
          <option value="7">7 days</option>
          <option value="14">14 days</option>
          <option value="30">30 days</option>
        </select>
      </div>
      <div class="buttons">
        <button @click="confirmBorrow">Confirm</button>
        <button @click="cancel">Close</button>
      </div>
      <div v-if="showNotExistMessage" class="limit-exceeded-message">
        The borrowed books do not exist or are out of stock!
      </div>
      <div v-if="showLimitExceededMessage" class="limit-exceeded-message">
        You have reached the limit of available books!
      </div>
      <div v-if="showSuccessMessage" class="success-message">
        Borrowing succeeded !
      </div>
    </div>
  </template>
  
  <script>
  export default {
    name: "BorrowConfirmation",
    props: {
      selectedBook: {
        type: Object,
        required: true
      }
    },
    data() {
      return {
        selectedDuration: '7',
        userId: null,
        showSuccessMessage: false,
        showLimitExceededMessage: false,
        showNotExistMessage: false,
      };
    },
    mounted() {
      this.userId = this.$globalVariable.userid; // 获取用户 ID 并存储在 userId 数据属性中
      console.log('用户 ID:', this.userId);
    },

    methods: {
      confirmBorrow() {
        // 发送 POST 请求到 /book/borrow 接口
        this.$request.post('/book/borrow', {
          "bookId": this.selectedBook.isbn,
          "userId": this.userId
        })
        .then(res => {
          if (res.data.message === 'The borrowed books do not exist or are out of stock') {
              this.showNotExistMessage = true;
              return;
          }
          if (res.data.message === 'Exceed the limit of available books') {
              // 如果返回的错误信息是“exceed the limit of available books”，设置 showLimitExceededMessage 为 true
              this.showLimitExceededMessage = true;
              return;
          }
          console.log('Borrowing succeeded:', res.data);
          this.showSuccessMessage = true;
          // 3 秒后隐藏成功消息提示框
          setTimeout(() => {
              this.showSuccessMessage = false;
          }, 3000);
          // 处理借阅成功的逻辑
        })
        .catch(error => {
          console.error('Borrowing failed:', error);
          // 处理借阅失败的逻辑
        });
      },
      cancel() {
        this.$emit('close');
      }
    }
  };
  </script>
  
  
  <style scoped>
  .borrow-book {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    max-width: 500px;
    padding: 20px;
    background-color: rgba(255, 255, 255, 1.0);
    border: 1px solid #ccc;
    border-radius: 5px;
  }
  
  .book-info {
    margin-bottom: 20px;
  }
  
  .borrow-options {
    margin-bottom: 20px;
  }
  
  .buttons {
    display: flex;
    justify-content: space-between;
  }
  
  button {
    background-color: #007bff;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
  }
  
  button:hover {
    background-color: #0056b3;
  }
  
  .success-message {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #28a745;
    color: #fff;
    padding: 10px 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    animation: fadeOut 3s ease-in-out forwards;
  }

  /* 新增借阅上限提示组件的样式 */
.limit-exceeded-message {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #dc3545;
    color: #fff;
    padding: 10px 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    animation: fadeOut 3s ease-in-out forwards;
}

.not-exist-message {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #dc3545;
    color: #fff;
    padding: 10px 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    animation: fadeOut 3s ease-in-out forwards;
}
  
  @keyframes fadeOut {
    0% {
      opacity: 1;
    }
    90% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      display: none;
    }
  }
  </style>